<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8"/>
    <title>css格式化美化压缩工具 - 前端工具箱 - 猿来如此</title>
    <meta name='author' content='猿来如此'/>
    <meta name='copyright' content='whoopsfeed.com'/>
    <meta name="keywords" content="css/js/html/json 格式化工具"/>
    <meta name="description" content="猿来如此-工具箱:css/js/html/json 格式化工具"/>
    <link rel="stylesheet" type="text/css" href="./assets/styles/style.css"/>
    <link rel="stylesheet" type="text/css" href="./assets/styles/font-awesome.min.css"/>
    <script type="text/javascript" src="./assets/scripts/seajs/sea.js"></script>
    <script>
        seajs.config({
            charset: 'utf-8',
            alias: {
                'jquery': 'jquery/jquery.last',
                'seajs-log': 'seajs/plugins/seajs-log',
                'seajs-debug': 'seajs/plugins/seajs-log'
            },
            debug: true,
            preload: ["jquery", 'seajs-log']
        });
        var app = app || {};
        app.baseUrl = "http://tool.yanue.net/";
        app.sign = "sign";
    </script>
</head>
<body>
<?php
include './view/common/header.php';
?>
<section class="wrap">
    <section class="content">
        <section class="tool-area">
            <h1 class="tool-title">
                <i class="icon icon-hand-right"></i> css格式化美化压缩工具
            </h1>

            <div>
                <textarea class="code-area" id="code-area" style="width: 100%;height: 300px;"></textarea>
            </div>
            <script type="text/javascript">
                seajs.use('format/css-format', function (t) {
                    // 横排
                    $(document).on('click', '.css-horizontal-btn', function () {
                        var code = $('#code-area').val();
                        formatCode = t.toHorizontal(code);
                        $('#code-area').val(formatCode);
                    });
                    // 竖排
                    $(document).on('click', '.css-vertical-btn', function () {
                        var code = $('#code-area').val();
                        formatCode = t.toVertical(code);
                        $('#code-area').val(formatCode);
                    });
                    // 解压
                    $(document).on('click', '.css-format-btn', function () {
                        var code = $('#code-area').val();
                        formatCode = t.format(code);
                        $('#code-area').val(formatCode);
                    });
                    // 压缩
                    $(document).on('click', '.css-pack-btn', function () {
                        var code = $('#code-area').val();
                        formatCode = t.pack(code);
                        $('#code-area').val(formatCode);
                    });
                });
            </script>
            <p class="tool-btn">
                <input type="button" value="横排" class="btn btn-warning css-horizontal-btn"/>
                <input type="button" value="竖排" class="btn btn-info css-vertical-btn"/>
                <input type="button" value="解压" class="btn btn-success css-format-btn"/>
                <input type="button" value="压缩" class="btn btn-danger css-pack-btn"/>
        <span>
            (请在上面的区域输入<mark>css</mark>代码)
        </span>
            </p>
        </section>
        <article class="tool-detail">
        </article>
        <!-- Duoshuo Comment BEGIN -->
        <div class="ds-thread"></div>
        <script type="text/javascript">
            var duoshuoQuery = {short_name: "whoopsfeed"};
            (function () {
                var ds = document.createElement('script');
                ds.type = 'text/javascript';
                ds.async = true;
                ds.src = 'http://static.duoshuo.com/embed.js';
                ds.charset = 'UTF-8';
                (document.getElementsByTagName('head')[0]
                    || document.getElementsByTagName('body')[0]).appendChild(ds);
            })();
        </script>
        <!-- Duoshuo Comment END -->
    </section>
    <aside class="sidebar">
        <h2 class="side-title"><i class="icon icon-hand-right"></i> 前端工具箱 <i class="icon icon-hand-left"></i></h2>

        <div class="side-widget">
            <ul class="side-list">
                <li>
                    <a href="./format.php?t=css" class=""><i class="icon icon-angle-right"></i> css格式化美化工具</a>
                </li>
                <li>
                    <a href="./format.php?t=html" class=""><i class="icon icon-angle-right"></i>HTML格式化压缩工具</a>
                </li>
                <li>
                    <a href="./format.php?t=js" class=""><i class="icon icon-angle-right"></i> JS美化压缩加密工具</a>
                </li>
                <li>
                    <a href="./format.php?t=json" class=""><i class="icon icon-angle-right"></i> JSON格式化工具</a>
                </li>
            </ul>
        </div>
    </aside>
</section>
<div class="clearfix"></div>
<?php
include './view/common/footer.php';
?>
</body>
</html>